<style>
.edit-text{color:red;cursor: pointer;}
</style>
<div class="row-content am-cf" id="app">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-cf">标签管理</div>
                </div>
                <div class="widget-body am-fr">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <form class="am-form-inline" role="form" action="<?php echo url(); ?>">
                        <div class="am-form-group">
                            <input type="text" class="am-form-field" name="tag_name" placeholder="标签名">
                        </div>
                        <button type="submit" class="am-btn am-btn-default am-btn-success am-radius am-btn-xs">查找</button>
                        </form>
                    </div>

                    <div class="am-u-sm-12" style="margin-top:10px;">
                        <div class="am-form-group">
                            <label class="am-form-label">类型：</label>
                            <select name="tag_type" @change="onChangeTagType">
                                <option :value="item.id" v-for="item in tag_types">{{ item.text }}</option>
                            </select>
                            <a class="am-btn am-btn-default am-btn-danger am-radius am-btn-xs" href="javascript:;;" @click="onSetType">设置类型</a>
                        </div>
                    </div>


                    <div class="am-scrollable-horizontal am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped
                         tpl-table-black am-text-nowrap">
                            <thead>
                            <tr>
                                <th><input type="checkbox" name="checkall" @click="onCheck" v-model="checked" /></th>
                                <th>ID</th>
                                <th>名称</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php if (!$list->isEmpty()): foreach ($list as $item): ?>
                                <tr>
                                    <td class="am-text-middle"><input type="checkbox" class="ids" v-model="checklist" name="ids[]" value="<?php echo $item['id']; ?>"  /></td>
                                    <td class="am-text-middle"><?php echo $item['id']; ?></td>
                                    <td class="am-text-middle">
                                        <p class="item-title"><?php echo $item['tag_name']; ?></p>
                                    </td>
                                    <td class="am-text-middle">
                                        <text-edit :item_id="<?php echo $item['id']; ?>" :id="<?php echo $item['tag_type']; ?>"></text-edit>
                                    </td>
                                    <td class="am-text-middle">
                                        <div class="tpl-table-black-operation">
                                            <a href="javascript:;" class="item-delete tpl-table-black-operation-del"
                                               data-id="<?php echo $item['id']; ?>">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; else: ?>
                                <tr>
                                    <td colspan="9" class="am-text-center">暂无记录</td>
                                </tr>
                            <?php endif; ?>
                            </tbody>
                        </table>    
                    </div>
                    <div class="am-u-lg-12 am-cf">
                        <div class="am-fr"><?php echo $list->render(); ?> </div>
                        <div class="am-fr pagination-total am-margin-right">
                            <div class="am-vertical-align-middle">总记录：<?php echo $list->total(); ?></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
Vue.component("text-edit" , {
    props : ['id' , 'item_id'] ,
    data : function() {
        return {
            text : '',
            editable : false
        }
    },
    template : `<div v-if="editable" class="edit-select">
                    <select name="tag_type" @change="changeType">
                        <option value="0">未指定</option>
                        <option value="1">足球</option>
                        <option value="2">篮球</option>
                    </select>
                </div>
                <div v-else class="edit-text" @click="onEdit">{{ text }}</div>`,
    created : function(){
        this.display();
    },
    methods: {
        display : function(){
            switch(parseInt(this.id)){
                case 1 : this.text = '足球';break;
                case 2 : this.text = '篮球';break;
                default : this.text = '未指定';
            }
        },
        changeType: function(e){
            this.id = e.target.value;
            this.display();
            this.editable = false;
            console.log(this.item_id);
            $.post("<?php echo url('change') ?>" , {id: this.item_id , tag_type: this.id} , function(data){
                if(data.code < 1){
                    alert('修改标签类型失败');
                }
            });
        },
        onEdit: function(){
            this.editable = true;
        }
    }
});
new Vue({
    el : '#app',
    data : {
        editable : false,
        checked : false,
        tag_types : [{id:0,text:'未指定'},{id:1,text:'足球'},{id:2,text:'篮球'}],
        tag_type : 0,
        checklist : []
    },
    methods : {
        onCheck : function(){
            var that= this;
            if(that.checked){
                that.checked = false;
                that.checklist = [];
            }else{
                that.checked = true;
                $(".ids").each(function(){
                    that.checklist.push($(this).val());
                });
            }
            console.log(that.checklist);
        },
        onChangeTagType: function(e){
            var id = e.target.value;
            this.tag_type = id;
            console.log(this.tag_type);
        },
        onSetType: function(){
            var that = this;
            if(that.tag_type <= 0){
                layer.msg("未选择类型");
                return false;
            }
            var ii = layer.load(0,{shade: [0.8,'#000']});
            $.post("<?php echo url('changes') ?>" , {ids: that.checklist , tag_type: that.tag_type} , function(data){
                layer.close(ii);
                if(data.code < 1){
                    layer.msg('修改标签类型失败');
                }else{
                    layer.msg('修改标签类型成功');
                }
                setTimeout(() => {
                    location.href = "<?php echo url(); ?>";
                }, 1500);
            });
        }
    },
});
</script>

